<template>
	<view class="jiusuoda">
		<!-- 搜索框 -->
		<view class="search-box">
			<view class="loaction">
				<view class="sy">
					<image src="/static/wine-index/sy_icon_dw.png" />
				</view>
				<view>{{address || '邯郸'}}</view>
				<view class="city">
					<image src="/static/wine-index/loaction.png" />
				</view>
			</view>
			<view class="search" @tap="toSrearch">
				<view class="icon">
					<image src="/static/images/search.png" />
				</view>
				<view class="text">{{searchContent ? searchContent : '在酒里周年庆秒杀场'}}</view>
			</view>
		</view>
		<view class="jiusuoda_tags">
			<view class="jiusuoda_tags_item" :class="jiusuodaTags == 1 ? 'active' : ''" @tap="jiusuodaBtn(1)">
				<view class="jiusuoda_img">
					<img :src="jiusuodaTags == 1 ? '/static/jiusuoda/jiusuoda-r.png' : '/static/jiusuoda/jiusuoda.png'"
						alt="">
				</view>
				<view class="">
					酒速达
				</view>
			</view>
			<view class="jiusuoda_tags_item" :class="jiusuodaTags == 2 ? 'active' : ''" @tap="jiusuodaBtn(2)">
				<view class="kuaidi_img">
					<img :src="jiusuodaTags == 2 ? '/static/jiusuoda/kuaidi-r.png' : '/static/jiusuoda/kuaidi.png'"
						alt="">
				</view>
				<view class="">
					快递
				</view>
			</view>
			<view class="jiusuoda_tags_item" :class="jiusuodaTags == 3 ? 'active' : ''" @tap="jiusuodaBtn(3)">
				<view class="ziti_img">
					<img :src="jiusuodaTags == 3 ? '/static/jiusuoda/ziti-r.png' : '/static/jiusuoda/ziti.png'" alt="">
				</view>
				<view class="">
					自提
				</view>
			</view>
		</view>
		<view class="jiu_tags">
			<view class="jiu_tags_item" :class="jiuTags == 1 ? 'jiuActive' : ''" @tap="jiuBtn(1)">
				<view class="jiu_img">
					<img src="/static/jiusuoda/baijiu.png" alt="">
				</view>
				<view class="jiu_name">
					白酒
				</view>
			</view>
			<view class="jiu_tags_item" :class="jiuTags == 2 ? 'jiuActive' : ''" @tap="jiuBtn(2)">
				<view class="jiu_img">
					<img src="/static/jiusuoda/pijiu.png" alt="">
				</view>
				<view class="jiu_name">
					啤酒
				</view>
			</view>
			<view class="jiu_tags_item" :class="jiuTags == 3 ? 'jiuActive' : ''" @tap="jiuBtn(3)">
				<view class="jiu_img">
					<img src="/static/jiusuoda/hongjiu.png" alt="">
				</view>
				<view class="jiu_name">
					红酒
				</view>
			</view>
			<view class="jiu_tags_item" :class="jiuTags == 4 ? 'jiuActive' : ''" @tap="jiuBtn(4)">
				<view class="jiu_img">
					<img src="/static/jiusuoda/yangjiu.png" alt="">
				</view>
				<view class="jiu_name">
					洋酒
				</view>
			</view>
			<view class="jiu_tags_item" :class="jiuTags == 5 ? 'jiuActive' : ''" @tap="jiuBtn(5)">
				<view class="jiu_img">
					<img src="/static/jiusuoda/jiuyin.png" alt="">
				</view>
				<view class="jiu_name">
					酒饮
				</view>
			</view>
		</view>
		<view class="jiuClass_tags">
			<view class="jiuClass_item">
				<scroll-view scroll-x="true" class="scrollView" style="width: 90%; height: 40rpx;">
					<view class="scroll_class">
						<view :class="scrollView == 1 ? 'screenActive' : ''" class="jiuClass_name"
							@tap="scrollViewBtn(1)">浓香型</view>
						<view :class="scrollView == 2 ? 'screenActive' : ''" class="jiuClass_name"
							@tap="scrollViewBtn(2)">酱香型</view>
						<view class="jiuClass_name">浓香型</view>
						<view class="jiuClass_name">米香型</view>
						<view class="jiuClass_name">其他类型</view>
					</view>
				</scroll-view>
				<view class="shaixuan" @tap="shaixuanBtn()">
					<view class="shaixuan_name">筛选</view>
					<view class="shaixuan_icon"></view>
				</view>
			</view>
		</view>
		<view class="jiusuoda_list">
			<view class="jiusuoda_main">
				<view class="jiusuoda_item">
					<view class="img">
						<img src="" alt="">
						<view v-show="jiusuodaTags == 1" class="jiusuoda_icon" style="color: #804A02;">
							酒速达
						</view>
					</view>
					<view class="jiusuoda_name">这是商品名称或者店铺名称11111111111</view>
					<view class="jiusuoda_bottom">
						<view class="price">
							<span class="current">￥2899</span>
							<span class="before">￥3200</span>
						</view>
						<view class="jiuClass">
							酱香型
						</view>
					</view>
				</view>
				<view class="jiusuoda_item">
					<view class="img">
						<img src="" alt="">
						<view v-show="jiusuodaTags == 1" class="jiusuoda_icon" style="color: #804A02;">
							酒速达
						</view>
					</view>
					<view class="jiusuoda_name">这是商品名称或者店铺名称11111111111</view>
					<view class="jiusuoda_bottom">
						<view class="price">
							<span class="current">￥999</span>
							<span class="before">￥1027</span>
						</view>
						<view class="jiuClass">
							浓香型
						</view>
					</view>
				</view>
				<view class="jiusuoda_item">
					<view class="img">
						<img src="" alt="">
						<view v-show="jiusuodaTags == 1" class="jiusuoda_icon" style="color: #804A02;">
							酒速达
						</view>
					</view>
					<view class="jiusuoda_name">这是商品名称或者店铺名称11111111111</view>
					<view class="jiusuoda_bottom">
						<view class="price">
							<span class="current">￥999</span>
							<span class="before">￥1027</span>
						</view>
						<view class="jiuClass">
							浓香型
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="shaixuanFlag" class="shaixuan_view">
			<view class="">
				<view class="shaixuan_view_item">
					<view class="view_item_title">
						排序方式
					</view>
					<view class="view_item_content">
						<view :class="screenSort == 1 ? 'screenActive' : ''" class="content" @tap="screenSortBtn(1)">
							价格优先</view>
						<view :class="screenSort == 2 ? 'screenActive' : ''" class="content" @tap="screenSortBtn(2)">
							好评优先</view>
						<view :class="screenSort == 3 ? 'screenActive' : ''" class="content" @tap="screenSortBtn(3)">
							销量优先</view>
					</view>
				</view>
				<view class="shaixuan_view_item">
					<view class="view_item_title">
						商品筛选
					</view>
					<view class="view_item_content">
						<view :class="screenCommodity == 1 ? 'screenActive' : ''" class="content"
							@tap="screenCommodityBtn(1)">所有商品</view>
						<view :class="screenCommodity == 2 ? 'screenActive' : ''" class="content"
							@tap="screenCommodityBtn(2)">热销特惠</view>
					</view>
				</view>
				<view class="shaixuan_view_item">
					<view class="view_item_title">
						价格区间
					</view>
					<view class="view_item_content">
						<view :class="screenPrice == 1 ? 'screenActive' : ''" class="content" @tap="screenPriceBtn(1)">
							0-100元</view>
						<view :class="screenPrice == 2 ? 'screenActive' : ''" class="content" @tap="screenPriceBtn(2)">
							100-500元</view>
						<view :class="screenPrice == 3 ? 'screenActive' : ''" class="content" @tap="screenPriceBtn(3)">
							500-1000元</view>
						<view :class="screenPrice == 4 ? 'screenActive' : ''" class="content" @tap="screenPriceBtn(4)">
							1000以上</view>
					</view>
				</view>
			</view>
			<view class="resetOk">
				<view class="reset">重置</view>
				<view class="ok">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				jiusuodaTags: 1,
				jiuTags: 1,
				scrollView: 0,
				shaixuanFlag: false,
				screenSort: 1,
				screenCommodity: 0,
				screenPrice: 0,
			}
		},
		methods: {
			jiusuodaBtn(id) {
				this.jiusuodaTags = id
			},
			jiuBtn(id) {
				this.jiuTags = id
			},
			scrollViewBtn(id) {
				this.scrollView = id
			},
			shaixuanBtn() {
				let flag = true
				this.shaixuanFlag = flag != this.shaixuanFlag
			},
			screenSortBtn(id) {
				this.screenSort = id
			},
			screenCommodityBtn(id) {
				this.screenCommodity = id
			},
			screenPriceBtn(id) {
				this.screenPrice = id
			},
		}
	}
</script>

<style>
	@import './jiusuoda.css'
</style>